<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>

<body>
    <!-- 
        用 Vue.js + Vue Router 创建单页应用，是非常简单的。
        使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，
        当你要把 Vue Router 添加进来，我们需要做的是，
        将组件 (components) 映射到路由 (routes)，
        然后告诉 Vue Router 在哪里渲染它们。
    -->
    <div id="app">
        <h1>Hello App</h1>
        <p>
            <!-- 使用 router-link 组件来导航 -->
            <!-- 通过 `to` 属性指定连接 -->
            <!-- router-link 默认渲染一个a标签 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将被渲染到这里 -->
        <router-view></router-view>

        <!-- 
            history.go(Number/Url):
                go(-1) 返回上一页，原表单内的数据会丢失(清空) -- 后退+刷新
            
            history.back():
                back() 返回上一页，原表单内的数据会保留 -- 后退
         -->
        <a href="javascript:history.go(-1)">Window.History.GO(-1)</a>
    </div>

    <script>
        /* 使用模块化机制编程，导入vue,vue-router,要调用vue.use(VueRouter) */
        /*
            第一步：
            定义路由组件
            可以从其他文件中import进来
        */
        const Foo = {
            template: '<div>foo</div>'
        }
        const Bar = {
            template: '<div>bar</div>'
        }

        /**
         * 第二步：
         * 定义路由，每个路由应该映射到一个组件上
         * 其中 `component` 可以是通过  Vue.extend() 创建的组件构造器
         * 或者只是一个配置对象
         */

        const routes = [{
            path: '/foo',
            component: Foo
        }, {
            path: '/bar',
            component: Bar
        }]

        /**
         * 第三步：
         * 创建router实例，然后传入routes配置
         */
        const router = new VueRouter({
            routes //(缩写),相当于 routes:routes
        })

        /**
         * 第四步：
         * 创建和挂在vue根实例
         * 要通过router配置参数传入路由，
         * 从而让整个应用都有路由功能
         */
        const app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>

</html>